<template>
<div class="editSingleNode edit-menu">
  <div class="title"><span>单节点编辑器</span></div>
  <el-select
    placeholder="选择或搜索节点"
    v-model="editNodeModel.value"
    @change="editNodeShow"
    size="mini"
    filterable
  >
    <el-option
      v-for="item in nodesArr"
      :key="item.uuid"
      :label="item.uuid + ' ' + item.label"
      :value="item.uuid"
    >
    </el-option>
  </el-select>
  <div class="row">
    <el-select
      placeholder="节点类型"
      v-model="editNodeModel.typeId"
      value="value"
      size="mini"
      :disabled="editNodeModel.uuid==''"
      filterable
    >
      <el-option
        v-for="item in typeArr"
        :key="item.id"
        :label="item.id + ' ' + item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
  </div>
  <div class="row">
    <input class="input" v-model="editNodeModel.uri" placeholder="节点URI" />
  </div>
  <div class="row">
    <input class="input" v-model="editNodeModel.label" placeholder="节点标签" />
  </div>
  <div class="row pickRRow">
    <div class="title">半径</div>
    <el-slider
      :min="10"
      :max="100"
      size="mini"
      class="rPicker"
      :disabled="editNodeModel.value===''"
      v-model="editNodeModel.r"
      type="range"
      :value="editNodeModel.r"
    ></el-slider>
  </div>
  <div class="divider"></div>
  <div class="row pickColorRow">
    <div class="title">颜色</div>
    <el-input
      size="mini"
      class="colorPicker"
      :disabled="editNodeModel.value===''"
      v-model="editNodeModel.color"
      type="color"
    ></el-input>
  </div>
  <div class="row">
    <el-button class="el-button" size="mini" v-on:click="wantEditNode"
    >修改</el-button
    >
  </div>
  <div class="row">
    <el-button class="el-button" size="mini" type="danger" v-on:click="wantDeleteNode"
    >删除</el-button
    >
  </div>
</div>
</template>

<script>
import { deleteNodeAPI, editNodeAPI } from "@/api/kgeditor/elementeditor";

export default {
  name: "editSingleNodeComponent",
  data() {
    return {
      editNodeModel: {
        value: "", //用于表单控件展示
        uuid: "",
        uri: "",
        label: "",
        typeId: "",
        color: "#c8c8c8",
        r: 30,

        colorChanged: false,
        rChanged: false,

        running: false
      },
      KG: this.$parent.$refs.graphComponent.KG,
      nodesArr: [],
      typeArr: []
    }
  },
  created() {
    this.nodesArr = this.KG.kgInfo.visibleNodes;
    this.typeArr = this.KG.kgInfo.typeList;
  },
  watch:{
    "KG.update.nodes": {
      handler:function() {
        this.nodesArr = null;
        this.nodesArr = this.KG.kgInfo.visibleNodes;
      },
      deep:true
    },
    "KG.update.typeList": {
      handler:function() {
        this.typeArr = null;
        this.typeArr = this.KG.kgInfo.typeList;
      },
      deep:true
    },
    "KG.selectedNodeUpdate": {
      handler:function() {
        if(this.KG.selectedNode!=null) this.assignNodeModel(this.KG.selectedNode);
      }
    },
    deep:true
  },
  methods: {
    editNodeShow(id) {
      let node = this.KG.getNodeById(Number(id));
      if (node == null) {
        this.$message.error("找不到节点实体,请刷新页面或重新加载数据");
      } else {
        this.assignNodeModel(node);
        if(this.KG.selectedNode==null||this.KG.selectedNode.uuid!=node.uuid){
          this.KG.focusNode(this.editNodeModel.uuid);
          this.KG.zoomToNode(this.editNodeModel.uuid);
        }
      }
    },
    wantEditNode(){
      let _this = this;
      if (this.editNodeModel.running) {
        this.$message.info("上一次操作尚未完成,请稍等");
        return;
      }
      // --- 检查是否选择节点
      if (this.editNodeModel.uuid == "") {
        this.$message.info("请先选择要编辑的节点");
        return;
      }

      let originalNode = this.KG.getNodeById(Number(this.editNodeModel.uuid));

      let fixMessage = "";

      // --- 检查URI是否改变
      if(this.editNodeModel.uri != "" && this.editNodeModel.uri != originalNode.uri){
        fixMessage += '<div><b>URI:</b> "' + originalNode.uri + '"->"' + this.editNodeModel.uri + '";</div>';
      }
      else _this.editNodeModel.uri = originalNode.uri;

      // --- 检查标签是否改变
      if(this.editNodeModel.label != "" && this.editNodeModel.label != originalNode.label){
        fixMessage += '<div><b>标签:</b> "' + originalNode.label + '"->"' + this.editNodeModel.label + '";</div>';
      }
      else _this.editNodeModel.label = originalNode.label;

      // --- 检查类型是否改变
      if(this.editNodeModel.typeId != "" && this.editNodeModel.typeId != originalNode.type.id){
        let newType = this.KG.getTypeById(this.editNodeModel.typeId);
        fixMessage += '<div><b>类型:</b> "' + originalNode.type.name + '"->"' + newType.name + '";</div>';
      }
      else _this.editNodeModel.typeId = originalNode.type.id;

      // --- 检查颜色是否改变
      if(this.editNodeModel.color != null && this.editNodeModel.color != originalNode.color){
        fixMessage += '<div><b>颜色:</b> "' + originalNode.color + '"->"' + this.editNodeModel.color + '";</div>';
        this.editNodeModel.colorChanged = true;
      }
      else {
        _this.editNodeModel.color = originalNode.color;
        this.editNodeModel.colorChanged = false;
      }

      // --- 检查半径是否改变
      if(this.editNodeModel.r != "" && this.editNodeModel.r != originalNode.r){
        fixMessage += '<div><b>半径:</b> "' + originalNode.r + '"->"' + this.editNodeModel.r + '";</div>';
        this.editNodeModel.rChanged = true;
      }
      else {
        _this.editNodeModel.r = originalNode.r;
        this.editNodeModel.rChanged = false;
      }

      // --- 检查是否有任何改变
      if (fixMessage == "") {
        this.$message.warning("没有做任何修改");
        return;
      }

      this.$confirm(fixMessage + "做出以上修改,是否继续?", {
        dangerouslyUseHTMLString: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        _this.editNode(originalNode);
      });

    },
    editNode(originalNode) {
      let _this = this;
      this.editNodeModel.running = true;
      editNodeAPI(
        {
          id: this.editNodeModel.uuid,
          nodeAtId: this.editNodeModel.uri,
          label_ZH: this.editNodeModel.label,
          type_id: this.editNodeModel.typeId,
          color: this.editNodeModel.colorChanged?
            _this.editNodeModel.color:
            (originalNode.selfColor?originalNode.selfColor:""),
          radius: this.editNodeModel.rChanged?
            _this.editNodeModel.r:
            (originalNode.selfR?originalNode.selfR:-1),
          kgID: this.KG.kgInfo.id
        },
        function() {
          _this.KG.editNode(
            _this.editNodeModel.uuid,
            _this.editNodeModel.uri,
            _this.editNodeModel.label,
            _this.editNodeModel.typeId,
            _this.editNodeModel.color,
            _this.editNodeModel.r
          );
          _this.$message.success("修改节点成功");
        },
        function(error) {
          _this.$message.error("修改节点失败" + error);
        },()=>{
          _this.editNodeModel.running = false;
        }
      );
    },
    clearNodeShow(){
      this.editNodeModel = {
        value: "",
        id: "",
        uri: "",
        label: "",
        type: "",
        color: null,
        r: 30,
        running: false
      }
    },
    wantDeleteNode() {
      let _this = this;
      if (this.editNodeModel.uuid == "") {
        this.$message.info("请先选择要删除的节点");
        return;
      }
      if (this.editNodeModel.running) {
        this.$message.info("上一次操作尚未完成,请稍等");
        return;
      }
      this.$confirm("这将导致与其相关的连接全部被删除,确定要删除当前节点?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        _this.deleteNode();
      });
    },
    deleteNode() {
      let _this = this;
      this.editNodeModel.running = true;
      deleteNodeAPI(
        {
          id: this.editNodeModel.uuid,
          kgID: this.KG.kgInfo.id
        },
        function() {
          _this.KG.deleteNodeById(Number(_this.editNodeModel.uuid));
          _this.editNodeModel.uuid = "";
          _this.editNodeModel.value = "";
          _this.editNodeModel.uri = "";
          _this.editNodeModel.label = "";
          _this.editNodeModel.typeId = "";
          _this.editNodeModel.running = false;
          _this.$message.success("删除节点成功");
        },
        function(error) {
          _this.editNodeModel.running = false;
          _this.$message.error("删除节点失败" + error);
        }
      );
    },
    assignNodeModel(node){
      this.editNodeModel.value = node.uuid;
      this.editNodeModel.uuid = node.uuid;
      this.editNodeModel.uri = node.uri;
      this.editNodeModel.label = node.label;
      this.editNodeModel.typeId = node.type.id;
      this.editNodeModel.color = node.color;
      this.editNodeModel.r = node.r;
    }
  }
};
</script>

<style scoped>
.editSingleNode .row{
  margin: 10px auto;
  width: 190px;
}
.editSingleNode .row .title{
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}
.input {
  display: block;
  margin: 0 auto;
  width: 85%;
  font-size: 10px;
}

.rPicker {
  margin: 0 auto;
  width: 85%;
}
</style>
